import { EChartsOption } from 'echarts'
import { memo, useRef } from 'react'
import { useRecoilValue } from 'recoil'
import useEcharts from '@/hooks/useEcharts'
import { getByRate } from '../../service'
import { dictValues } from '@/store/dicts'

const optionMap: EChartsOption = {
  color: ['#5584FF', '#BC95F7', '#F9CA43', '#2ECABA '],
  title: {
    text: '医院定等分布',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    top: '40%',
    right: '0%',
    icon: 'circle',
  },
  series: [
    {
      name: '医院定等分布',
      type: 'pie',
      radius: ['40%', '70%'],
      // avoidLabelOverlap: false,
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        //   show: true,
        show: false,
        //   length: 30,
        //   length2: 30,
      },
      label: {
        formatter: '{b}-{c}家-{d}%',
        // show: false,
        // position: 'center'
      },
      data: [],
    },
  ],
}

export default memo(() => {
  const dicts = useRecoilValue(dictValues)
  const mapRef = useRef<HTMLDivElement>(null)

  useEcharts(mapRef, optionMap, async (chart) => {
    const res = await getByRate({})
    console.log(
      'data🚀🚀🚀🚀',
      res.data.rateDataList.map((item: any) => ({
        value: item.hospitalTotalCountByRate,
        name: dicts.hospital_rating.find((val) => val.value === item.hospitalRating)?.label,
      })),
    )
    const option: EChartsOption = {
      series: [
        {
          data: res.data.rateDataList.map((item: any) => ({
            value: item.hospitalTotalCountByRate ? item.hospitalTotalCountByRate : 0,
            name: dicts.hospital_rating.find((val) => val.value === item.hospitalRating)?.label,
          })),
        },
      ],
    }
    chart.setOption(option)
  })

  return <div style={{ height: '100%' }} ref={mapRef}></div>
})
